import { defineComponent, watch, shallowReactive, ref } from 'vue'
import * as echarts from 'echarts'

// 声明类型
const PropsType = {
	data: {
		type: Object,
		default: () => ({
			showTitle: true,
			list: []
		}),
		require: true
	}
} as const
let color = ['#93F5E1', '#93AAF5', '#93DBF5', '#FF8400', '#00FFFF', '#fd5151', '#f071ff', '#85f67a']
// 定义主体
export default defineComponent({
	props: PropsType,
	setup(props) {
		const chartRef = ref()
		// 配置项
		let options = {}
		watch(
			() => props.data,
			(val: any) => {
				let data = [];
				for (let i = 0; i < val.list.length; i++) {
					data.push(
						{
							value: val.list[i].value,
							// name: val.list[i].name,
							itemStyle: {
								normal: {
									borderRadius: 10, // 圆角
									color: val.color ? val.color[i] : color[i],
								}
							}
						},
						{
							value: 4,
							name: '',
							itemStyle: {
								normal: {
									label: {
										show: false
									},
									labelLine: {
										show: false
									},
									color: 'rgba(0, 0, 0, 0)',
									borderColor: 'rgba(0, 0, 0, 0)',
									borderWidth: 0
								}
							}
						}
					);
				}
				let seriesOption = [
					{
						name: 'pie2',
						type: 'pie',
						radius: [48, 50],
						color: '#068898',
						label: {
							show: false
						},
						labelLine: {
							show: false
						},
						data: [1],
						silent: true
					},
					{
						name: '',
						type: 'pie',
						radius: [58, 70],
						grid: {
							containLabel: true
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '14',
								fontWeight: 'normal'
							}
						},
						labelLine: {
							show: false
						},
						data: data
					}
				]
				options = {
					title: [
						{
							text: val.title,
							x: "center",
							y: "30%",
							show: val.showTitle,
							textStyle: {
								fontSize: 16,
								fontFamily: 'Alibaba PuHuiTi, Alibaba PuHuiTi',
								fontWeight: "400",
								color: "#E5F3FF",
								lineHeigth: 24
							}
						},
						{
							text: val.list.reduce((prev, curr) => { return prev + Number(curr.count) }, 0),
							x: "center",
							y: "45%",
							show: val.showTitle,
							textStyle: {
								fontSize: 32,
								fontFamily: ' D-DIN-DIN, D-DIN-DIN',
								fontWeight: "bold",
								color: "#FFFFFF",
								lineHeigth: 32
							}
						},
					],
					series: seriesOption
				}
				// 手动触发更新
				if (chartRef.value) {
					// 通过初始化参数打入数据
					chartRef.value.initChart(options, true)
				}
			},
			{
				immediate: true,
				deep: true
			}
		)
		return () => {
			const height = "160px"
			const width = "160px"

			return <div>
				<echart ref={chartRef} options={options} height={height} width={width} />
			</div>
		}
	}
})

